//进行项目的打包工作、
// gulp 打包的配置文件
// 导入 gulp 第三方包来实现打包配置的书写
const gulp = require('gulp')
const cssmin = require('gulp-cssmin')
const autoprefixer = require('gulp-autoprefixer')
const sass = require('gulp-sass')(require('sass'))
const uglify = require('gulp-uglify')
const babel = require('gulp-babel')
const htmlmin = require('gulp-htmlmin')
const fileinclude = require('gulp-file-include')
// const imagemin = require('gulp-imagemin')
const del = require('del')
const webserver = require('gulp-webserver')

/*
  1. 配置一个 打包 css 文件的任务
   

/*
  1. 配置一个 打包 css 文件的任务
    
*/
const cssHandler = () => {
  // 书写打包 css 的任务流程
  // 需要让 gulp 工具能够跟随到这个任务流
  // 需要把整个任务流 return 出去
  return gulp
    .src('./src/css/*.css')
    .pipe(autoprefixer()) // 自动添加前缀
    .pipe(cssmin()) // 进行打包操作
    .pipe(gulp.dest('./dist/css/')) // 存储到指定位置
}

/*
  2. 创建一个打包 sass 文件的任务
   
*/
const sassHandler = () => {
  // 书写打包 sass 任务的流程
  return gulp
    .src('./src/sass/*.scss')
    .pipe(sass()) // 转换成 css 代码
    .pipe(autoprefixer()) // 自动添加前缀
    .pipe(cssmin()) // 进行压缩处理
    .pipe(gulp.dest('./dist/sass/')) // 放到指定目录内
}

/*
  3. 打包 js 文件的任务
   
*/
const jsHandler = () => {
  // 书写打包 js 文件的流程
  return gulp
    .src('./src/js/*.js')
    .pipe(babel({ presets: ['@babel/preset-env'] })) // 把 ES6 转换成 ES5 语法
    .pipe(uglify()) // 进行压缩处理
    .pipe(gulp.dest('./dist/js/')) // 放在指定目录内
}

/*
  4. 打包 html 文件的任务
   
*/
const htmlHandler = () => {
  // 打包 html 文件的 任务流程
  return gulp
    .src('./src/*.html')
    .pipe(fileinclude({  // 进行 html 组件的组装
      // 你的组件文件所存储的路径, 你的 html 片段文件, 存放的目录
      basepath: './src/components/',
      // 你自己定义的特殊标识符
      // 你在html 文件内书写这个标识符的时候, 表示你要使用 fileinclude 语法了
      prefix: '@-@'
    }))
    .pipe(htmlmin({ // 进行压缩处理
      // 表示把多余的空白内容去掉
      // collapseWhitespace: true,
      // 表示把布尔类型属性简化书写
      collapseBooleanAttributes: true,
      // 去除双引号
      removeAttributeQuotes: true,
      // 移出空属性
      removeEmptyAttributes: true,
      // 移除注释
      removeComments: true,
      // 移除 script 标签身上默认的 type 属性
      removeScriptTypeAttributes: true,
      // 移出 link 标签和 style 标签身上的默认 type 属性
      removeStyleLinkTypeAttributes: true,
      // 压缩内嵌式 css 样式
      minifyCSS: true,
      // 压缩内嵌式 js 代码
      minifyJS: true
    }))
    .pipe(gulp.dest('./dist/views/')) // 进行转存到指定文件夹内
}

/*
  5. 打包 图片 文件
    
*/
const imgHandler = () => {
  // 书写打包 img 文件的流程
  return gulp
    .src('./src/images/*.**')
    // .pipe(imagemin()) // 进行压缩操作
    .pipe(gulp.dest('./dist/images/')) // 进行转存到指定位置
}

/*
  6. 转存 audio 和 video 文件
   
*/
const videoHandler = () => {
  return gulp
    .src('./src/videos/*.**')
    .pipe(gulp.dest('./dist/videos/'))
}

const audioHandler = () => {
  return gulp
    .src('./src/audios/*.**')
    .pipe(gulp.dest('./dist/audios/'))
}

/*
  7. 转存 fonts 文件
    + 不需要压缩, 直接转存就可以了
*/
const fontHandler = () => {
  return gulp
    .src('./src/fonts/*.**')
    .pipe(gulp.dest('./dist/fonts/'))
}

/*
  8. 配置一个删除任务
    

*/
const delHandler = () => {
  return del(['./dist/'])
}

/*
  9. 配置 gulp 启动服务器的任务
   
*/
const serverHandler = () => {
  return gulp
    .src('./dist/')
    .pipe(webserver({
      // 你的域名
      host: 'www.xhl.com',
      // 监听的端口号
      port: '6666',
      // 当代码发生变化的时候, 自动刷新浏览器
      livereload: true,
      // 启动服务器以后, 自动打开的第一个页面, 按照 dist 目录后面的路径开始书写
      open: './views/index.html',
      // 配置服务器代理选项
      proxies: [
        // 这个数组内的每一个对象就是一个代理内容
        {
          // 代理标识符
          source: '/gx',
          // 请求跨域的地址
          target: 'http://localhost:8888/test/first'
        },
        {
          source: '/xhl',
          target: 'http://localhost:8888/test/second'
        }
      ]
    }))
}


/*
  10. 配置一个监控任务
    
*/
const watchHandler = () => {
  gulp.watch('./src/views/*.html', htmlHandler)
  gulp.watch('./src/css/*.css', cssHandler)
  gulp.watch('./src/js/*.js', jsHandler)
}
const _default = gulp.series(
  delHandler,
  gulp.parallel(cssHandler, sassHandler, htmlHandler, jsHandler, imgHandler, videoHandler, audioHandler, fontHandler),
  serverHandler,
  watchHandler
)

// 导出你创建的所有任务
module.exports = {
  cssHandler,
  sassHandler,
  jsHandler,
  htmlHandler,
  imgHandler,
  videoHandler,
  audioHandler,
  fontHandler,
  delHandler,
  default: _default
}